<!--
 * @Author: xjt
 * @Date: 2021-06-26 10:49:46
 * @LastEditTime: 2021-06-26 13:33:21
 * @Description: 用户综合管理信息预览tab组件
 * @LastEditors: xjt
-->
<template>
  <el-dialog custom-class="userDetailsInfo" title="详细信息" :visible.sync="dialogVisible" width="80%" append-to-body @closed="closed">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane :label="item.label" :name="item.componentName" v-for="item in panList" :key="item.id">
        <component :is="activeName" @close="dialogVisible=false" ></component>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import hotelInfo from '@/components/business/user-details/components/hotelInfo.vue'
import userInfo from '@/components/business/user-details/components/userInfo.vue'
// import checkInInfo from '@/components/business/user-details/components/checkInInfo.vue'
import timeOutInfo from '@/components/business/user-details/components/timeOutInfo.vue'
import leaveAdd from './addLeave.vue'
export default {
  name: 'userDetails',
  components: {
    hotelInfo,
    userInfo,
    checkInInfo,
    timeOutInfo,
    leaveAdd
  },
  data () {
    return {
      // 弹窗显隐
      dialogVisible: false,
      // 显示tab项
      activeName: 'hotelInfo'
    }
  },
  computed: {
    // tab组件信息
    panList () {
      return [
        { id: 1, label: '隔离点信息', componentName: 'hotelInfo' },
        { id: 2, label: '隔离人员信息', componentName: 'userInfo' },
        // { id: 3, label: '入住信息', componentName: 'checkInInfo' },
        { id: 4, label: '隔离逾期登记', componentName: 'timeOutInfo' },
        { id: 8, label: '离点登记', componentName: 'leaveAdd' },
      ]
    }
  },
  methods: {
    show () {
      this.dialogVisible = true
    },
    handleTabClick (tab) {
      console.log(tab);
    },
        closed(){
      sessionStorage.removeItem("hotelName")
    }
  }
}
</script>

<style lang="scss">
.userDetailsInfo {
  .el-dialog__body {
    padding: 0 20px;
  }
}
</style>